<template>
  <div class="student-list">
    <div class="title">
      <div class="block"></div>
      <div class="word">学生列表</div>
      <div class="button">
        <el-button class="el-button"
                   @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <search :formInline="formInline"
              @getSearchList="getSearchList">
        <div class="search-form">
          <el-form :inline="true"
                   :model="formInline"
                   class="demo-form-inline">
            <el-form-item class="el-form-item"
                          label="用户账号 :">
              <el-input class="el-input"
                        v-model.trim="formInline.username"
                        placeholder="用户账号"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input class="el-input"
                        v-model.trim="formInline.nickname"
                        placeholder="姓名">
              </el-input>
            </el-form-item>
            <el-form-item label="注册时间 :">
              <el-input class="el-input"
                        v-model.trim="formInline.createTime"
                        placeholder="请选择时间">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </search>
    </div>
    <div>
      <datashow>
        <template v-slot:form>
          <el-table class="el-table"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="userId"
                             label="用户ID"> </el-table-column>
            <el-table-column prop="username"
                             label="用户账号">
            </el-table-column>
            <!-- <el-table-column prop="nickname" label="昵称"> </el-table-column> -->
            <el-table-column prop="nickname"
                             label="姓名"> </el-table-column>
            <el-table-column prop="registrationSource"
                             label="注册来源">
            </el-table-column>
            <el-table-column prop="consultantContact"
                             label="是否需要顾问联系">
              <template slot-scope="scope">
                <span v-if="scope.row.consultantContact">需要</span>
                <span v-else>不需要</span>
              </template>
            </el-table-column>

            <el-table-column label="免费查学校">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.freeCheck"
                           :active-value="1"
                           :inactive-value="2"
                           active-color="#1abc9c"
                           inactive-color="#B9B9B9"
                           @change="changeSwitch(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="账户启用状态">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled"
                           :active-value="1"
                           :inactive-value="2"
                           active-color="#1abc9c"
                           inactive-color="#B9B9B9"
                           @change="changeDeletedSwitch(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="operation"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click="getStudentInfo(scope.row)"
                           type="text"
                           :disabled="flag"
                           size="small">分配</el-button>
                <el-dialog title="分配顾问"
                           :visible.sync="dialogVisible"
                           width="60%"
                           @close="closeFun()">
                  <el-form ref="formInline_consultant"
                           :model="formInline_consultant"
                           :inline="true"
                           label-width="120px">
                    <el-form-item class="el-form-item"
                                  label="请输入搜索内容:">
                      <el-input class="el-input"
                                clearable
                                v-model.trim="formInline_consultant.inquire"
                                placeholder="用户名/姓名/手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                      <el-button @click="getSearchList">搜索</el-button>
                    </el-form-item>
                  </el-form>
                  <div>
                    <el-table class="el-table"
                              ref="multipleTable"
                              :data="consultantData"
                              @select="select"
                              @select-all="selectAll"
                              border
                              style="width: 100%">
                      <el-table-column type="selection"></el-table-column>
                      <el-table-column prop="username"
                                       label="用户名"> </el-table-column>
                      <el-table-column prop="nickname"
                                       label="姓名">
                      </el-table-column>
                      <el-table-column prop="phone"
                                       label="手机号">
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="paging">
                    <paging :total="total_consultant"
                            @size="size"
                            @currentpage="currentpage"></paging>
                  </div>
                  <span slot="footer"
                        class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary"
                               @click="updateConsultant">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button type="text"
                           size="small"
                           @click="getUseId(scope.row)">查看</el-button>
                <el-button type="text"
                           size="small"
                           @click="goEdit(scope.row)">编辑</el-button>
                <el-button type="text"
                           size="small"
                           @click="deleteStudent(scope.row)">删除</el-button>
                <el-dialog title="提示"
                           :visible.sync="deleteDialogVisible"
                           width="30%"
                           center>
                  <div style="text-align:center">
                    <span>是否确实删除用户ID为{{deleteUserId}}的学生</span>
                  </div>
                  <span slot="footer"
                        class="dialog-footer">
                    <el-button @click="deleteDialogVisible = false">取 消</el-button>
                    <el-button type="primary"
                               @click="checkDeleteStudent">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <div class="bottom">
            <!-- <el-checkbox class="el-checkbox"
                         @change="toggleSelect(tableData)">全选</el-checkbox>
            <el-button class="el-button">批量操作</el-button>
            <el-button class="el-button">确定</el-button> -->
            <div class="paging">
              <paging :total="total"
                      @size="size"
                      @currentpage="currentpage"></paging>
            </div>
          </div>
        </template>
      </datashow>
    </div>
    <div>
      <footerinfo></footerinfo>
    </div>
  </div>
</template>

<script>
import search from "../../../component/search/search.vue";
import datashow from "../../../component/datashow/datashow.vue";
import paging from "../../../component/paging/paging.vue";
import footerinfo from "../../../component/footer/footer.vue";
import Router from "vue-router";
import {
  getStudentList,//获取学生列表(管理员)
  getStudentListByid,//获取学生列表(顾问)
  getConsultant,//获取顾问列表
  updateConsultantById,//更新学生订单顾问分配
  deleteStudentByid,//删除单个学生
  disableStudent,//账户启用状态
  updateStudent,//更新学生信息 前端把用户名设置不能修改
} from "../../../api/index";

export default {
  inject: ['reload'],
  name: "studentManage",
  components: {
    search, //筛选查询组件
    datashow, //数据列表组件
    paging, //分页组件
    footerinfo, //页脚组件
  },

  data () {
    return {
      ch: true,
      current: '',
      pagesize: '',
      total: 0,//学生信息一共多少条数据
      total_consultant: 0,//顾问信息一共多少条数据
      value1: true,
      value2: true,
      allSelect: false,
      flag: false,
      dialogVisible: false,
      consultantData: [],//顾问信息
      userId: '',//当前用户Id
      deleteDialogVisible: false,//删除学生弹框
      deleteUserId: '',
      formInline: {
        username: "", //用户账号
        nickname: "", //用户呢称
        createTime: "", //注册时间
      },
      formInline_consultant: {
        inquire: "",//"username": "May","nickname": "梅","phone": "13488884815"(三个属性进行搜索)
      },
      tableData: [],
    };
  },

  mounted () {
    this.$emit('routeName', "studentList");
    this.getList()
  },

  methods: {
    select (selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll (selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    closeFun () {
      //重置form表单
      // this.getList()
      // this.$refs['formInline_consultant'].resetFields();
      this.formInline_consultant = { inquire: "" }
      this.$refs['multipleTable'].clearSelection();
    },
    getUseId (val) {
      this.$router.push({
        name: "studentDetail",
        params: {
          userId: val.userId,
        },
      });
      // console.log(val.userId);
    },
    goEdit (val) {
      this.$router.push({
        name: "studentEdit",
        params: {
          userId: val.userId,
        },
      });
    },
    deleteStudent (val) {
      this.deleteDialogVisible = true
      this.deleteUserId = val.userId
    },
    checkDeleteStudent () {
      this.deleteDialogVisible = false
      deleteStudentByid(this.deleteUserId).then((data) => {
        console.log(data);
        this.getList()
      });
    },
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    getList () {
      // console.log(window.sessionStorage.getItem('user'));
      // console.log(window.sessionStorage.getItem('consultantId'));
      if (window.sessionStorage.getItem('user') === 'admin') {
        getStudentList(this.current, this.pagesize,
          this.formInline.username, this.formInline.nickname, this.formInline.createTime).then((data) => {
            console.log(data.data);
            data.data.records.forEach((item) => {
              if (item.disabled === false) {
                item.disabled = 1
              }
              if (item.disabled === true) {
                item.disabled = 2
              }
              if (item.freeCheck === false) {
                item.freeCheck = 1
              }
              if (item.freeCheck === true) {
                item.freeCheck = 2
              }
            })
            this.tableData = data.data.records
            this.total = data.data.total
          });
      }
      else {
        this.flag = true //顾问不能分配学生
        getStudentListByid(this.current, this.pagesize,
          this.formInline.username, this.formInline.nickname, this.formInline.createTime,
          window.sessionStorage.getItem('consultantId')).then((data) => {
            console.log(data.data);
            this.tableData = data.data.records;
            this.total = data.data.total
          });
      }

      getConsultant(this.current, this.pagesize, this.formInline_consultant.inquire).then((data) => {
        console.log(data.data);
        this.consultantData = data.data.records;
        this.total_consultant = data.data.total
      });
    },
    getSearchList (val) {
      this.current = '' //清空分页当前页数
      this.pagesize = ''//清空分页当前页的条数
      this.getList()
    },
    getStudentInfo (val) {
      this.dialogVisible = true
      this.userId = val.userId;
    },
    updateConsultant () {
      this.dialogVisible = false
      console.log(this.$refs.multipleTable.selection[0]);
      console.log(this.userId + '和' + this.$refs.multipleTable.selection[0].userId);
      updateConsultantById(this.userId, this.$refs.multipleTable.selection[0].userId).then((data) => {
        console.log(data);
      });
    },
    refresh () {
      this.reload()
    },
    changeSwitch (val) {
      console.log(val);
      let a = false
      if (val.freeCheck === 1) {
        a = false
      }
      if (val.freeCheck === 2) {
        a = true
      }
      updateStudent(a, val.userId).then((data) => {
        console.log(data);
      });
    },
    changeDeletedSwitch (val) {
      disableStudent(val.userId).then((data) => {
        console.log(data);
      });
    }
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
  margin-left: 80%;
}
.search-form {
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
}
/* 筛选查询 */
.demo-form-inline {
  width: 1500px;
}
.el-switch {
  width: 50px;
  height: 30px;
}
.bottom {
  /* display: flex; */
  text-align: center;
  margin: 10px 10px;
}
.el-checkbox {
  margin-top: 10px;
}
.el-button {
  margin-left: 20px;
}
.paging {
  /* margin-left: 300px; */
  text-align: center;
  margin-top: 20px;
}
</style>
